<script>
export default {
  name: "GradientColorPicker",
  data() {
    return {
      color: ''
    }
  },
  methods: {
    handleChange(value, context) {
      console.log("--color--", value, context);
    },
    handlePaletteChange(e) {
      console.log("--handlePaletteChange e--", e);
    },
    handleRecentColorsChangee() {
      console.log("--handleRecentColorsChange e--", e);
    }
  },
};
</script>

<template>
  <div>
    <header class="header">
      <h1>多色选择器</h1>
      <span class="color-box" :style="{ background: color }">{{ color }}</span>
    </header>
    <t-color-picker-panel
      v-model="color"
      enable-alpha
      :color-modes="['linear-gradient']"
      @change="handleChange"
      @palette-bar-change="handlePaletteChange"
      @recent-colors-change="handleRecentColorsChange"
      :enable-multiple-gradient="false"
    />
  </div>
</template>

<style scoped>
.header {
  display: flex;
  align-items: center;
  gap: 20px;
}

.color-box {
  padding: 10px 15px;
  border-radius: 4px;
}
</style>
